<template>
  <div class="login-container">
    <!-- 添加组员信息卡片 -->
    <div class="team-info">
      <el-popover placement="bottom-end" :width="300" trigger="hover" popper-class="team-popover">
        <template #reference>
          <div class="team-trigger">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>课设小组</span>
          </div>
        </template>

        <div class="team-card">
          <div class="team-header">
            <div class="header-bg"></div>
            <el-avatar :size="64" class="team-avatar">
              <img src="@/assets/image.png" alt="AUST">
            </el-avatar>
            <h3>数据库课程设计</h3>
            <div class="team-subtitle">学生宿舍管理系统</div>
            <div class="team-badges">
              <el-tag size="small" effect="dark" type="success">Vue3</el-tag>
              <el-tag size="small" effect="dark" type="warning">Express</el-tag>
              <el-tag size="small" effect="dark" type="danger">MySQL</el-tag>
              <el-tag size="small" effect="dark" type="danger">Node</el-tag>
            </div>
          </div>

          <div class="team-body">
            <h4 class="section-title">
              <el-icon>
                <UserFilled />
              </el-icon>
              团队成员
            </h4>
            <div class="team-members">
              <div v-for="member in teamMembers" :key="member.id" class="member-item">
                <el-avatar :size="40">{{ member.name.slice(0, 1) }}</el-avatar>
                <div class="member-info">
                  <div class="member-name">{{ member.name }}</div>
                  <div class="member-role">{{ member.role }}</div>
                </div>
                <el-tooltip :content="member.contribution" placement="top">
                  <el-progress type="circle" :percentage="member.contribution" :width="28" :stroke-width="3"
                    :show-text="false" />
                </el-tooltip>
              </div>
            </div>

            <div class="team-stats">
              <div class="stat-item">
                <div class="stat-value">300+</div>
                <div class="stat-label">代码提交</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">15</div>
                <div class="stat-label">功能模块</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">98%</div>
                <div class="stat-label">完成度</div>
              </div>
            </div>

            <div class="team-footer">
              <div class="teacher-info">
                <el-avatar :size="24" icon="UserFilled" />
                <span>指导教师：杨高明</span>
              </div>
              <div class="project-time">
                <el-icon>
                  <Timer />
                </el-icon>
                <span>完成时间：2025年5月</span>
              </div>
            </div>
          </div>
        </div>
      </el-popover>
    </div>
    <div class="login-box">
      <div class="title-container">
        <h2>学生宿舍管理系统</h2>
        <div class="title-underline"></div>
      </div>
      <div class="login-form">
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" />
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="Lock"
              show-password />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleLogin" style="width: 100%">
              登录
            </el-button>
          </el-form-item>

          <div class="register-link">
            还没有账号？
            <el-link type="primary" @click="goToRegister">立即注册</el-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { loginAPI } from '@/api/login'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
// import { useUserStore } from '@/stores'
import { setToken } from '@/util/auth'

// 导入需要的图标
import { InfoFilled, UserFilled, Timer } from '@element-plus/icons-vue'

// const userStore = useUserStore()
const router = useRouter()
const loginForm = reactive({
  username: '',
  password: '',
})
const loginFormRef = ref(null)

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
}

const handleLogin = async () => {
  // 这里添加登录逻辑
  const { data: res } = await loginAPI(loginForm)
  console.log(res);
  if (res.status !== 0) {
    // eslint-disable-next-line no-undef
    return ElMessage.error(res.message)
  }
  // 登录成功，保存token
  // eslint-disable-next-line no-undef
  ElMessage.success('登录成功')
  // userStore.setToken(res.token)
  setToken(res.token)
  router.push('/home')
}

const goToRegister = () => {
  router.push('/register')
}

// 添加团队成员数据
const teamMembers = [
  {
    id: 1,
    name: '吴玮涛',
    role: '组长 - 2023305335',
    avatar: '',
    contribution: 85
  },
  {
    id: 2,
    name: '周涛涛',
    role: '组员 - 2023305326',
    avatar: '',
    contribution: 75
  },
  {
    id: 3,
    name: '屈金成',
    role: '组员 - 2023305327',
    avatar: '',
    contribution: 80
  },
  {
    id: 4,
    name: '陈捷',
    role: '组员 - 2023305342',
    avatar: '',
    contribution: 80
  }
]
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  /* 添加宽度限制 */
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
  /* 防止内容溢出 */
  margin: 0;
  padding: 0;
}

.login-container::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(-45deg);
  animation: wave 8s infinite linear;
}

.login-box {
  width: 420px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  transform: translateY(0);
  transition: all 0.3s ease;
}

.login-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.title-container {
  text-align: center;
  margin-bottom: 35px;
}

.title-container h2 {
  color: #333;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
}

.title-underline {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  margin: 0 auto;
  border-radius: 3px;
}

.login-form {
  margin-top: 25px;
}

:deep(.el-input .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input .el-input__wrapper:hover) {
  border-color: #764ba2;
  box-shadow: 0 0 0 1px rgba(118, 75, 162, 0.1);
}

:deep(.el-button--primary) {
  background: linear-gradient(90deg, #667eea, #764ba2);
  border: none;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
}

@keyframes wave {
  0% {
    transform: rotate(-45deg) translate(-50%, -50%);
  }

  100% {
    transform: rotate(-45deg) translate(50%, 50%);
  }
}

/* 添加输入框动画效果 */
:deep(.el-input__wrapper) {
  animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.register-link {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
}

:deep(.el-link) {
  margin-left: 5px;
  font-size: 14px;
  transition: all 0.3s ease;
}

:deep(.el-link:hover) {
  transform: translateY(-1px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 添加团队信息相关样式 */
.team-info {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.team-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.team-trigger:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.team-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.team-header {
  position: relative;
  padding: 30px 20px;
  text-align: center;
  color: white;
  overflow: hidden;
  z-index: 1;
  /* 添加这行 */
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 0;
}

.team-avatar,
.team-header h3,
.team-subtitle {
  position: relative;
  z-index: 2;
}

.team-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  position: relative;
  /* 添加这行 */
  z-index: 2;
  /* 添加这行 */
}

.team-badges .el-tag {
  position: relative;
  /* 添加这行 */
  z-index: 2;
  /* 添加这行 */
}

.team-body {
  padding: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 16px;
  margin: 0 0 15px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #f8faff;
  margin-bottom: 10px;
}

.member-item:hover {
  transform: translateX(5px);
  background: #f0f3ff;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
  padding: 15px;
  background: linear-gradient(135deg, #f6f8ff 0%, #f0f3ff 100%);
  border-radius: 12px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.team-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.teacher-info,
.project-time {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 13px;
  margin-bottom: 8px;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 100%;
  }
}

/* 修改气泡卡片样式 */
:deep(.el-popover.team-popover) {
  padding: 0;
  border: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

:deep(.el-progress-circle) {
  transform: scale(0.8);
}

:deep(.el-tag) {
  border: none;
}
</style>